<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../../../css/font.css" th:href="@{/adminStatic/css/font.css}">
    <link rel="stylesheet" href="../../../css/xadmin.css" th:href="@{/adminStatic/css/xadmin.css}">
    <script th:src="@{/webjars/layui/2.5.6/layui.js}" src="" type="text/javascript"></script>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.js}" src="" type="text/javascript"></script>
    <script type="text/javascript" src="../../../js/xadmin.js" th:src="@{/adminStatic/js/xadmin.js}"></script>
    <script type="text/javascript" src="../../../js/xadmin.js" th:src="@{/adminStatic/js/MyLayuiUtils.js}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-form-item {
            margin-bottom: 0;
        }

        .layui-form-pane .layui-form-label {
            max-width: 100px;
        }

        .layui-form-item .layui-input-inline {
            width: 180px;
        }

        .layui-form-pane .layui-form-label {
            padding: 9px 15px;
        }
        .layui-btn.layui-btn-xs {
            height: 26px;
            line-height: 26px;
            font-size: 13px
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <table id="listInfo" lay-filter="listInfo"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm iconfont layui-btn-normal" lay-event="add">&#xe6b9; 添加</button>
        <button class="layui-btn layui-btn-sm iconfont layui-btn-danger" lay-event="del">&#xe69d; 删除</button>
    </div>
</script>

<script id="operationBar" type="text/html">
    <button class="layui-btn layui-btn-xs iconfont layui-btn-warm" lay-event="edit">&#xe69e; 修改</button>
</script>

<script>
    layui.use(['table', 'form', 'upload', 'laydate'],
        function () {
            var table = layui.table,
                layer = layui.layer,
                form = layui.form,
                upload = layui.upload,
                laydate = layui.laydate;

            // 初始调用表格加载方法
            loadFunction("getDataByPage");

            /**
             * 加载表格方法
             * @param url
             */
            function loadFunction(url) {
                //第一个实例
                table.render({
                    elem: '#listInfo'
                    , height: 'full-70'
                    , url: url //数据接口
                    , defaultToolbar: ['filter']
                    , loading: true
                    , limit: 20
                    , title: '楼宇信息'
                    , toolbar: '#toolbarDemo'
                    , page: {
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
                        , groups: 5 //只显示 5 个连续页码
                        , theme: '#1E9FFF'
                    }
                    , cols:
                        [
                            [ //表头
                                {type: 'checkbox', fixed: 'left', unresize: true}
                                , {field: 'id', title: '主键标识', sort: true}
                                , {field: 'buildingNum', title: '楼宇号', sort: true, templet:'<div>{{d.buildingNum}}号楼</div>'}
                                , {field: 'unitCount', title: '单元数量', sort: true, templet:'<div>{{d.unitCount}}单元</div>'}
                                , {field: 'floorCount', title: '最大楼层', sort: true, templet:'<div>{{d.floorCount}}层</div>'}
                                , {field: 'caozuo', title: '操作', toolbar:'#operationBar'}
                            ]
                        ]
                })
            }

            //头工具栏事件
            table.on('toolbar(listInfo)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                var selectCount = data.length;      //获取选中行
                var dataId = getIds(data);          //data是选中的所有数据，得到的是一个数组，将这个数组传入getIds方法进行处理
                switch (obj.event) {
                    case 'add':
                        // 跳转新增页面
                        toWindow("../building/toAddWindow", "新增楼宇信息", "400px", "280px");
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'del':
                        // 删除重要信息
                        deleteInfo(selectCount, dataId, "deleteInfo?ids=" + dataId);
                        break;
                }
            });

            //行内工具条
            table.on('tool(listInfo)', function (obj) {
                switch (obj.event) {
                    case 'edit':
                        var id = obj.data.id;
                        // 跳转修改页面
                        toWindow("../building/toEditWindow?id=" + id, "修改楼宇信息", "350px", "280px");
                        break;
                }
            });
        });
</script>
</html>